<!--
 * @Author: Your Name you@example.com
 * @Date: 2025-06-28 09:38:59
 * @LastEditors: Your Name you@example.com
 * @LastEditTime: 2025-07-02 17:31:32
 * @FilePath: \dapintest\src\App.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>

import Scanner from './components/Scanner/index1.vue';              //扫描组件

import HexagonCard from './components/HexagonCard/index1.vue'     //六边形 卡片
import card from './components/HeaderTitle/index.vue'      //每个区域的卡片
import TabsTitle from './components/TabsTitle/index.vue'           /// 切换内容的标题
</script>

<template>
  <div class="dashboard-bg">
    <div class="header">
      <header>
        <div class="parallelogram1"></div>
        <div class="parallelogram2"></div>
        <div class="parallelogram3"></div>
        <div class="parallelogram4"></div>
        <div class="parallelogram5"></div>
        <div class="parallelogram6"></div>
        <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 960 110" version="1.1" id="svg-ele">
          <defs>
            <linearGradient id="lineGradient" x1="0%" y1="0%" x2="100%" y2="0%">
              <stop offset="0%" style="stop-color: #a8e5ff; stop-opacity: 1" />
              <stop offset="100%" style="stop-color: #56a7e1; stop-opacity: 1" />
            </linearGradient>
          </defs>
          <polyline points="25,78 77.5,94 227,94 333,84 512,84 "
            style="fill: none; stroke: url(#lineGradient); stroke-width: 7" />
        </svg>
        <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 960 110" version="1.1" id="svg-ele-right">
          <defs>
            <linearGradient id="lineGradient" x1="0%" y1="0%" x2="100%" y2="0%">
              <stop offset="0%" style="stop-color: #56a7e1; stop-opacity: 1" />
              <stop offset="100%" style="stop-color: #a8e5ff; stop-opacity: 1" />
            </linearGradient>
          </defs>
          <polyline points="452,85 631,85 725,94 887,94 939,80.5 "
            style="fill: none; stroke: url(#lineGradient); stroke-width: 7" />
        </svg>
        <div class="ultra1 ultra"></div>
        <div class="ultra2 ultra"></div>
        <div class="ultra3 ultra"></div>
        <div class="para para1"></div>
        <div class="para para2"></div>
        <div class="para para3"></div>
        <div class="para para4"></div>
        <div class="para para5"></div>
        <div class="para para6"></div>
        <!--a8e5ff 56A7E1 -->
        <div class="cutting-parallelogram1"></div>
        <div class="cutting-parallelogram2"></div>
        <div class="weather">
          <div class="weather-icon">
            <img src="./assets/weather/1.png" alt="" />
          </div>
          <div class="weather-temp">
            <div class="weather-temp-num">
              <div class="weather-temp-num-num">13</div>
              <div class="weather-temp-num-unit">℃</div>
            </div>
            <div class="weather-line"></div>
            <div class="weather-text">晴</div>
          </div>
        </div>
        <div class="header-title">夏津县雨污地下管网智能安全监测预警系统</div>
      </header>
    </div>
    <!-- <HexagonCard type="pending"> 10 </HexagonCard>

      <HexagonCard type="processing"> 5 </HexagonCard>

      <HexagonCard type="completed"> 20 </HexagonCard>

      <HexagonCard type="overdue"> 3 </HexagonCard> -->
    <!-- <CircularRadar :size="200" :baseRadius="70" :spacing="10" /> -->
    <!-- <TabsTitle :name="'巡检点管理'"></TabsTitle> -->
    <!-- <Scanner></Scanner> -->
    <div class="main">
      <div class="aside-left">
        <div class="inspection stats">

          <card :title="'巡检统计'" isstack>
            <div style="display: flex;flex-direction: column;">
              <div class="account">
                <Scanner :text="'计划总数'" :number="'123'"></Scanner>
                <Scanner :text="'完成总数'" :number="'123'"></Scanner>
              </div>
              <div class="line">数据统计</div>
            </div>
          </card>

        </div>
        <div class="inspection bottom">

          <card :title="'巡检统计'">

          </card>

        </div>
      </div>
      <div class="aside-left">
        <div class="inspection">

          <card :title="'巡检统计'" isstack>


          </card>

        </div>
        <div class="inspection bottom">

          <card :title="'巡检统计'">


          </card>

        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">

@use "sass:math";

@function px-to-vw($px) {
  @return (math.div($px, 1920) * 100)+vw;
}
* {
  margin: 0;
  padding: 0;
}
.account {
  display: flex;
  justify-content: space-around;
}
.main {
  display: flex;
  justify-content: space-between;
  margin-top: px-to-vw(-40);
}
.line {
  margin-top: px-to-vw(70);
  margin-left: px-to-vw(20);
  width: 100%;
  height: px-to-vw(20);
  font-size: px-to-vw(16);
}
.inspection {
  width: px-to-vw(400);
  height: px-to-vw(300);
  margin: px-to-vw(0) px-to-vw(20) px-to-vw(40) px-to-vw(20);
}

.inspection.bottom {
  height: px-to-vw(560);
}
.dashboard-bg {
  background-color: rgb(183, 189, 179, 31);
  width: px-to-vw(1920);
  height: px-to-vw(1080);
  overflow: hidden;
  transform-origin: 0 0;
}

.header {
  position: relative;
  width: px-to-vw(1920);
  height: px-to-vw(150);
  background-image: linear-gradient(to bottom,
      rgba($color: #001A2C, $alpha: 0.96) 0%,
      rgba($color: #002433, $alpha: 0.6) 69%,
      rgba($color: #005491, $alpha: 0) 100%);
}

header {
  display: flex;
  // align-items: center;
  position: relative;
  width: px-to-vw(1920);
  height: px-to-vw(110);
  background-image: linear-gradient(rgb(0, 73, 114, 0), rgb(0, 125, 195, 1));
  // 对header进行切割
  clip-path: polygon(0 0,
      0 65.9%,
      3.3% 86.8%,
      11.8% 86.8%,
      17.3% 77.7%,
      29.5% 77.7%,
      50% 100%,
      70.5% 77.7%,
      82.7% 77.7%,
      88.2% 86.8%,
      96.7% 86.8%,
      100% 65.9%,
      100% 0);

  #svg-ele {
    z-index: 1;
  }

  #svg-ele-right {
    z-index: 1;
  }

  .parallelogram1 {
    position: absolute;
    top: px-to-vw(70);
    left: px-to-vw(-4);
    // top: 66px;
    // left: -4px;
    width: px-to-vw(82);
    height: px-to-vw(23);
    background-image: linear-gradient(rgba($color: #35c2ff, $alpha: 0.3),
        rgba($color: #4dffff, $alpha: 0.3));
    z-index: 1;
    // 剪裁一个平行四边形
    clip-path: polygon(0 0, 78% 100%, 100% 100%, 22% 0);
  }

  .parallelogram2 {
    position: absolute;
    top: px-to-vw(70);
    left: px-to-vw(15);
    // top: 66px;
    // left: -4px;
    width: px-to-vw(65);
    height: px-to-vw(20);
    background-image: linear-gradient(rgba($color: #35c2ff, $alpha: 1),
        rgba($color: #4dffff, $alpha: 1));
    z-index: 3;
    // 剪裁一个平行四边形
    clip-path: polygon(0 0, 85.6% 100%, 100% 100%, 14.4% 0);
  }

  .parallelogram3 {
    position: absolute;
    top: px-to-vw(70);
    left: px-to-vw(5);
    z-index: 2;
    // top: 66px;
    // left: -4px;
    width: px-to-vw(64.5);
    height: px-to-vw(17.5);
    background-image: linear-gradient(rgba($color: #35c2ff, $alpha: 1),
        rgba($color: #4dffff, $alpha: 1));
    // 阴影
    box-shadow: 0 0 px-to-vw(23) #6dffff;
    // 剪裁一个平行四边形
    clip-path: polygon(0 0, 75.5% 100%, 100% 100%, 24.5% 0);
  }

  .cutting-parallelogram1 {
    position: absolute;
    top: px-to-vw(80);
    left: px-to-vw(5);
    // z-index: 2;
    // top: 66px;
    // left: -4px;
    width: px-to-vw(290);
    height: px-to-vw(11);
    background-image: linear-gradient(rgba($color: #0079bd, $alpha: 1),
        rgba($color: #004166, $alpha: 0));
    // 阴影

    // 剪裁一个平行四边形
    clip-path: polygon(0 0, 10.5% 100%, 81% 100%, 100% 0);
  }

  .cutting-parallelogram2 {
    position: absolute;
    top: px-to-vw(80);
    right: px-to-vw(5);
    // z-index: 2;
    // top: 66px;
    // left: -4px;
    width: px-to-vw(290);
    height: px-to-vw(11);
    background-image: linear-gradient(rgba($color: #0079bd, $alpha: 1),
        rgba($color: #004166, $alpha: 0));
    // 阴影

    // 剪裁一个平行四边形
    clip-path: polygon(0 0, 19% 100%, 89.5% 100%, 100% 0);
  }

  .parallelogram4 {
    position: absolute;
    top: px-to-vw(70);
    right: px-to-vw(-4);
    // top: 66px;
    // left: -4px;
    width: px-to-vw(82);
    height: px-to-vw(23);
    background-image: linear-gradient(rgba($color: #35c2ff, $alpha: 0.3),
        rgba($color: #4dffff, $alpha: 0.3));
    z-index: 1;
    // 剪裁一个平行四边形
    clip-path: polygon(0 100%, 22% 100%, 100% 0, 78% 0);
  }

  .parallelogram5 {
    position: absolute;
    top: px-to-vw(70);
    right: px-to-vw(15);
    // top: 66px;
    // left: -4px;
    width: px-to-vw(65);
    height: px-to-vw(20);
    background-image: linear-gradient(rgba($color: #35c2ff, $alpha: 1),
        rgba($color: #4dffff, $alpha: 1));
    z-index: 3;
    // 剪裁一个平行四边形
    clip-path: polygon(0 100%, 14.4% 100%, 100% 0, 85.6% 0);
  }

  .parallelogram6 {
    position: absolute;
    top: px-to-vw(70);
    right: px-to-vw(5);
    z-index: 2;
    // top: 66px;
    // left: -4px;
    width: px-to-vw(64.5);
    height: px-to-vw(17.5);
    background-image: linear-gradient(rgba($color: #35c2ff, $alpha: 1),
        rgba($color: #4dffff, $alpha: 1));
    // 阴影
    box-shadow: 0 0 px-to-vw(23) #6dffff;
    // 剪裁一个平行四边形
    clip-path: polygon(0 100%, 24.5% 100%, 100% 0, 75.5% 0);
  }

  .cutting-parallelogram1 {
    position: absolute;
    top: px-to-vw(80);
    left: px-to-vw(5);
    // z-index: 2;
    // top: 66px;
    // left: -4px;
    width: px-to-vw(290);
    height: px-to-vw(11);
    background-image: linear-gradient(rgba($color: #0079bd, $alpha: 1),
        rgba($color: #004166, $alpha: 0));
    // 阴影

    // 剪裁一个平行四边形
    clip-path: polygon(0 0, 10.5% 100%, 81% 100%, 100% 0);
  }

  .ultra {
    position: absolute;
    top: px-to-vw(20);
    left: px-to-vw(5);
  }

  .ultra1 {
    top: px-to-vw(92);
    left: px-to-vw(848);
    width: px-to-vw(224);
    height: px-to-vw(18);
    background-image: linear-gradient(to right,
        rgba($color: #49a8ff, $alpha: 0) 0%,
        rgba($color: #42b0ff, $alpha: 1) 27%,
        rgba($color: #74deff, $alpha: 1) 48%,
        rgba($color: #42b0ff, $alpha: 1) 67%,
        rgba($color: #49a8ff, $alpha: 0) 100%);
    z-index: 3;
    clip-path: polygon(0 0, 50% 100%, 100% 0%, 50% 70%);
  }

  .ultra2 {
    top: px-to-vw(45);
    left: px-to-vw(490);
    width: px-to-vw(938.5);
    height: px-to-vw(95);
    background-image: linear-gradient(to bottom,
        rgba($color: #00d1ff, $alpha: 0) 0%,
        rgba($color: #00ffe0, $alpha: 1) 77%,
        rgba($color: #b8ffd9, $alpha: 1) 100%);
    z-index: 1;
    clip-path: polygon(0 0, 7.5% 50%, 50% 100%, 92.5% 50%, 100% 0%);
  }

  .ultra3 {
    top: px-to-vw(20);
    left: px-to-vw(490);
    width: px-to-vw(940);
    height: px-to-vw(95);
    background-image: linear-gradient(to left,
        rgba($color: #085784, $alpha: 0) 0%,
        rgba($color: #085784, $alpha: 1) 11%,
        rgba($color: #56ebff, $alpha: 1) 15%,
        rgba($color: #008b9e, $alpha: 1) 16%,
        rgba($color: #0ea9b2, $alpha: 1) 24%,
        rgba($color: #0ea9b2, $alpha: 1) 32%,
        rgba($color: #00479a, $alpha: 1) 43%,
        rgba($color: #00479a, $alpha: 1) 58%,
        rgba($color: #0ea9b2, $alpha: 1) 71%,
        rgba($color: #0ea9b2, $alpha: 1) 81%,
        rgba($color: #008b9e, $alpha: 1) 86%,
        rgba($color: #56ebff, $alpha: 1) 87%,
        rgba($color: #085784, $alpha: 1) 91%);
    z-index: 1;
    clip-path: polygon(0 0,
        15.7% 72.1%,
        33.9% 78.9%,
        50% 100%,
        66.1% 78.9%,
        84.3% 72.1%,
        100% 0%,
        83.9% 65.8%,
        50% 86.3%,
        16.1% 65.8%);
  }

  .para {
    position: absolute;
    top: px-to-vw(60);
    left: px-to-vw(720);
    width: px-to-vw(30);
    height: px-to-vw(40);
    border: 1px solid;
    transform: skew(-36deg, 10deg);
    /* Equal to skewX(10deg) */
    border-image: linear-gradient(to bottom,
        rgba($color: #0dc5ff, $alpha: 0.66) 0%,
        rgba($color: #0077ff, $alpha: 0) 64%) 1;
    /* 必须设置border-style和border-width */
    // background: #1a1a1a;
  }

  // 
  .para1 {
    top: px-to-vw(60);
    left: px-to-vw(720);
    transform: skew(-36deg, 0deg);
  }

  .para2 {
    top: px-to-vw(60);
    left: px-to-vw(790);
    transform: skew(-30deg, 0deg);
  }

  .para3 {
    top: px-to-vw(60);
    left: px-to-vw(860);
    transform: skew(-16deg, 0deg);
  }

  .para4 {
    top: px-to-vw(60);
    left: px-to-vw(950);
    transform: skew(16deg, 0deg);
  }

  .para5 {
    top: px-to-vw(60);
    left: px-to-vw(1030);
    transform: skew(30deg, 0deg);
  }

  .para6 {
    top: px-to-vw(60);
    left: px-to-vw(1100);
    transform: skew(36deg, 0deg);
  }

  .weather {
    position: absolute;
    top: px-to-vw(20);
    left: px-to-vw(100);
    display: flex;
    align-items: center;
    color: #fff;
    width: px-to-vw(150);
    height: px-to-vw(50);
    font-size: px-to-vw(14);

    .weather-icon {
      width: px-to-vw(50);
      height: px-to-vw(50);
      margin-right: px-to-vw(10);
      background-color: #fff;
    }

    .weather-temp {
      display: flex;
      flex-direction: column;
      align-items: center;

      .weather-line {
        width: px-to-vw(70);
        height: px-to-vw(3);
        background-color: rgba($color: #fff, $alpha: 0.3);
      }

      .weather-temp-num {
        display: flex;

        .weather-temp-num-num {
          font-size: px-to-vw(50);
        }
      }

      .weather-text {
        font-size: px-to-vw(20);
        text-align: center;
        color: #b3b5b7;
      }
    }
  }
}

.header-title {
  position: absolute;
  top: px-to-vw(20);
  left: px-to-vw(600);
  color: #fff;
  font-size: px-to-vw(36);
  font-weight: 800;
}
</style>
